<template>
  <div class="parent-management">
    <h2>{{ $t('message.parentPanel') }}</h2>
    <p>{{ $t('message.welcomeParent') }}</p>
    
    <el-tabs v-model="activeTab">
      <el-tab-pane :label="$t('message.profile')" name="profile">
        <div class="tab-content">
          <UserProfile />
        </div>
      </el-tab-pane>
      <el-tab-pane :label="$t('message.children')" name="children">
        <div class="tab-content">
          <ChildrenManagement />
        </div>
      </el-tab-pane>
      <el-tab-pane :label="$t('message.bookings')" name="bookings">
        <div class="tab-content">
          <BookingManagement />
        </div>
      </el-tab-pane>
      <el-tab-pane :label="$t('message.orders')" name="orders">
        <div class="tab-content">
          <OrderManagement />
        </div>
      </el-tab-pane>
      <el-tab-pane :label="$t('message.youbi')" name="youbi">
        <div class="tab-content">
          <YoubiManagement />
        </div>
      </el-tab-pane>
      <el-tab-pane :label="$t('message.messages')" name="messages">
        <div class="tab-content">
          <MessageManagement />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { ref } from 'vue';
import UserProfile from '@/components/user/UserProfile.vue';
import ChildrenManagement from '@/components/parent/ChildrenManagement.vue';
import BookingManagement from '@/components/admin/BookingManagement.vue';
import OrderManagement from '@/components/admin/OrderManagement.vue';
import YoubiManagement from '@/components/admin/YoubiManagement.vue';
import MessageManagement from '@/components/admin/MessageManagement.vue';

export default {
  name: 'ParentManagement',
  components: {
    UserProfile,
    ChildrenManagement,
    BookingManagement,
    OrderManagement,
    YoubiManagement,
    MessageManagement
  },
  setup() {
    const activeTab = ref('profile');

    return {
      activeTab
    };
  }
};
</script>

<style scoped>
.parent-management {
  padding: 20px;
}

.tab-content {
  margin-top: 20px;
}
</style>